<template>
<!-- 新建活动弹框 -->
  <el-dialog class="active_dialog"
  :visible.sync="visible" 
  title="新建活动" 
  @close="cancel"
  :close-on-click-modal="false" 
  :close-on-press-escape="false"
  :append-to-body="true"
  style="overflow: hidden;"
  >
    <el-form ref="form" :model="activeform" label-width="80px">
      <el-form-item label="活动主题:">
        <el-input clearable v-model="activeform.theme"></el-input>
      </el-form-item>
      <el-form-item label="活动描述:">
        <el-input clearable type="textarea" v-model="activeform.description"></el-input>
      </el-form-item>
      <el-form-item label="主持人:">
        <el-select clearable v-model="activeform.compereId" placeholder="选择主持人">
          <el-option v-for="item in hostList"
          :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="举办时间:">
        <div class="block">
          <el-date-picker clearable value-format="yyyy-MM-dd HH:mm:ss"
            v-model="activeform.holdTime"
            type="datetime"
            placeholder="选择时间">
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item label="地点:">
        <el-input clearable v-model="activeform.address"></el-input>
      </el-form-item>
      <el-form-item label="参会人员:">
        <!-- <el-input v-model="activeform.userIdlist"></el-input> -->
        <div class="block">
            <el-cascader
                :options="uislist"
                collapse-tags
                :props="props"
                clearable 
                v-model="userIdlists"></el-cascader>
            </div>
      </el-form-item>
      <el-form-item label="联系人:">
        <!-- <el-input v-model="activeform.contactsUserId"></el-input> -->
        <el-select clearable v-model="activeform.contactsUserId" placeholder="选择联系人">
          <el-option v-for="item in hostList"
          :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="联系电话:">
        <el-input v-model="activeform.phone"></el-input>
      </el-form-item> -->
    </el-form>
    <div class="publish_button">
      <el-button class="publish" type="primary" @click="publish">发布活动</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
    
  </el-dialog>
</template>

<script>
// import axios from "axios"
export default {
  data(){
    return{
      visible: false,
      activeform:{
        theme:"",//活动主题
        description:"",//活动描述
        compereId:"",//主持人
        holdTime:"",//时间
        address:"",//地点
        contactsUserId:"",//联系人
        // phone:"",//联系电话
        userIdlist:[],//参会人id
        useId:""
      },
      hostList:[],//主持人列表
      props: { multiple: true },
      uislist:[],//参会人list
      userIdlists:[],//参会人id以及学院id
    }
  },
  mounted(){
    this.gethostList()
    this.payerList()
  },
  methods:{
    init () {
      this.visible = true
      this.$nextTick(() => {
      })
    },
    gethostList(){//获取用户列表
      this.axios({
        headers:{'Authentication':localStorage.getItem('token')},
        method:"get",
        // url:`api/user/getUserListInfo?pageSize=12`,
        url:`/user/getUserListInfo`,
      }).then(res=>{
        // console.log(res)
        this.hostList = res.data.data.list
      })
    },
    publish(){//发布活动按钮
      // console.log(this.userIdlists)
      // console.log(this.activeform.userIdlist)
      for(var i=0;i<this.userIdlists.length;i++){
        // console.log(this.userIdlists[i][this.userIdlists[i].length-1])
        this.activeform.userIdlist.push(this.userIdlists[i][this.userIdlists[i].length-1])
      }
      this.axios({
        headers:{'Authentication':localStorage.getItem('token')},
        method:"post",
        // url:"api/activity/saveActivity",
        url:"/activity/saveActivity",
        data:this.activeform
      }).then(res=>{
        if(res.data.code != 20001){
          return this.$message.error(res.data.msg)
        }
        this.$alert('发布成功', {
          confirmButtonText: '确定',
            callback: action => {
            this.visible = false
            this.activeform={}
            this.$emit('activeList')
          }
        });
      })
    },
    payerList(){//用户信息树状图
      this.axios({
        headers:{'Authentication':localStorage.getItem('token')},
        method:"get",
        url:"/user/getUserTree",
      }).then(res=>{
        if(res.data.code != 20001){
          return this.$message.error(res.data.msg)
        }
        // console.log(res)
        this.uislist = res.data.data
      })
    },
    cancel(){//点击取消按钮
      this.visible = false
      this.activeform={}
    },
  }
}
</script>

<style lang="scss">
  .active_dialog{
    position: absolute;
    top: -5vh;
    // height: 90vh;
    // height: 60vh;
    overflow: auto;
    // .el-form{
    //   height: 60vh;
    //   // overflow: auto;
    // }
    .publish_button{
      text-align: center;
      padding-bottom: 2vh;
    }
  }
</style>